<template>
  <view class="mycomment">
    <view v-if="totalListData.length > 0">
      <view class="comment_list flex column" v-for="(item, index) in totalListData" :key="index">
        <view class="comment_top flex items justify-between">
          <view class="image_tittle flex items">
            <image :src="item.commentavatar" alt="" />
            <span>{{ item.commentname }}</span>
          </view>
          <view>
            <up-button
              class="editBtn"
              type="primary"
              :plain="true"
              text="删除"
              @click="commentDelete(item.id)"
            ></up-button>
          </view>
        </view>
        <view class="comment_center">
          {{ item.msg }}
        </view>
        <view class="comment_bottom flex">
          <view class="image_tittle flex items">
            <image :src="item.avatar" alt="" />
            <span>{{ item.nickname }}</span>
          </view>
          <view class="answer">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 暂无内容 -->
    <view style="background-color: #f5f5f5" class="nocontent" v-else></view>
    <!-- 弹框 -->
    <!-- //- 位置定位提示框 -->
    <ModalBox :data="modalData" @cancel="onModalBoxCancel" @confirm="onModalBoxConfirm"></ModalBox>
  </view>
</template>
<script setup>
import { userApi } from "../../api";
import ModalBox from "@/components/modal-box/modal-box.vue";

const modalData = ref({
  show: false,
  title: "你确定要删除该评论吗?",
  btn1: "取消",
  btn2: "确定",
  type: 1
});
const status = ref(true);
onLoad(() => {
  getMyComment();
});

const commentPage = ref({
  num: 10,
  page: 1
});

//总条数
const total = ref(0);
const totalListData = ref([]);
const getMyComment = () => {
  userApi
    .mycomment(commentPage.value)
    .then((res) => {
      if (res.code == 1) {
        // console.log("res", res.data.total);
        total.value = res.data.total;
        // totalListData.value = res.data.data;
        // console.log("dwfdwwdef", totalListData.value);
        // totalListData.value = [...totalListData.value, ...res.data.data];
        totalListData.value = commentPage.value.page === 1 ? res.data.data : totalListData.value.concat(res.data.data);

        uni.hideLoading();
      }
    })
    .catch(() => {
      uni.hideLoading();
    });
};
const dleId = ref("");
//删除评论
const commentDelete = (id) => {
  modalData.value.show = true;
  dleId.value = id;
};
// 触底触发
onReachBottom(() => {
  if (total.value > commentPage.value.num * commentPage.value.page) {
    commentPage.value.page++;
    getMyComment();
    uni.showToast({
      title: "加载中……",
      icon: "none",
      duration: 1000
    });
  } else {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
      duration: 1000
    });
    return;
  }
});
// 模态框操作
const onModalBoxCancel = () => {
  modalData.value.show = false;
};
const onModalBoxConfirm = () => {
  if (!status.value) return;
  status.value = false;
  userApi.commentdel({ id: dleId.value }).then((res) => {
    status.value = true;
    console.log("res", res.code);
    if (res.code == 0) {
      uni.showToast({ title: res.msg, icon: "none" });
    } else {
      uni.showToast({ title: "Success", icon: "none" });
      totalListData.value = [];
      commentPage.value.page = 1;
      getMyComment();
      modalData.value.show = false;
    }
  });
};
</script>

<style lang="scss" scoped>
page {
  background: #f5f5f5;
}
.mycomment {
  width: 100%;
  // height: 100%;
  box-sizing: border-box;
  background-color: #f5f5f5;
  padding: 24rpx 32rpx;
  .comment_list {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    padding: 24rpx;
    // border: 1px solid red;
    margin-bottom: 32rpx;

    .comment_top {
      display: flex;
      align-items: center;
      height: 72rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;
      image {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        opacity: 1;
      }
      span {
        height: 44rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
        line-height: 44rpx;
        margin-left: 16rpx;
      }
      .editBtn {
        // width: 104rpx;
        height: 56rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        border: 2rpx solid #e84026;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #e84026;
      }
    }
    .comment_center {
      margin-top: 32rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 48rpx;
    }
    .comment_bottom {
      margin-top: 32rpx;
      border: 2rpx solid #e6e6e6;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 24rpx;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      .answer {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 52rpx;
      }
      image {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        opacity: 1;
      }
      span {
        height: 44rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
        line-height: 44rpx;
        margin-left: 16rpx;
      }
    }
  }
}
</style>